<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            .inner {
                border: 1px solid #ccc;
                width: 1000px;
                height: 500px;
                margin: 0 auto;
            }

            * {
                padding: 0;
                margin: 0;
            }

            .imgimglit {
                list-style: none;

                display: flex;
                width: 1000px;
                height: 500px;
                overflow: hidden;
            }

            .imgimglit li {
                width: 200px;
                height: 500px;
                float: left;
                cursor: pointer;
                /* 过渡属性 */
                transition: all 0.4s;
            }
        </style>
    </head>

    <body>
        <div class="inner" id="inner">
            <ul class="imgimglit" id="imgimglit">
                <li>
                    <a href="#"><img src="./01.jpeg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="./01.jpeg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="./01.jpeg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="./01.jpeg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="./01.jpeg" alt="" /></a>
                </li>
            </ul>
        </div>

        <script>
            var inner = document.getElementById('inner');
            var imgimglit = document.getElementById('imgimglit');
            var imgli = document.querySelectorAll('.imgimglit >li');

            for (var i = 0; i < imgli.length; i++) {
                imgli[i].addEventListener('mouseover', function () {
                    for (var i = 0; i < imgli.length; i++) {
                        imgli[i].style.width = (1000 - 800) / 4 + 'px';
                    }

                    this.style.width = 800 + 'px';

                    imgli[i].addEventListener('mouseout', function () {
                        for (var i = 0; i < imgli.length; i++) {
                            imgli[i].style.width = 200 + 'px';
                        }
                    });
                });
            }
        </script>
    </body>
</html>
